<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Resize</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            .renderer {
                width: 100%;
                height: 100%;
                background-color: #ccc;
            }
            .canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 800px;
                height: 600px;
                background-color: #fff;
            }
            .canvas .component {
                position: absolute;
                transform: rotate(91deg);
            }
            .canvas .component::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .canvas .component.active {
                box-shadow: 0 0 1px 1px #ff0000;
            }
            .selector {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="renderer">
            <div class="canvas"></div>
            <div class="selector">
                <div class="t"></div>
                <div class="tr"></div>
                <div class="r"></div>
                <div class="rb"></div>
                <div class="b"></div>
                <div class="lb"></div>
                <div class="l"></div>
                <div class="tl"></div>
            </div>
        </div>
    </body>
    <script src="./models/Button.js"></script>
    <script>
        const oCanvas = document.querySelector(".canvas");
        const oSelector = document.querySelector(".selector");
        const client = {
            canvas: { left: 40, top: 40, scale: 1 },
        };
        const schema = {
            components: [{ id: "1", el: "button", active: false, left: 200, top: 200, width: 200, height: 100, content: "按钮" }],
        };
        const selector = {
            left: 0,
            top: 0,
            width: 0,
            height: 0,
        };
        init();
        function init() {
            render();
        }
        function render() {
            oCanvas.style.left = client.canvas.left + "px";
            oCanvas.style.top = client.canvas.top + "px";
            oCanvas.innerHTML = "";
            schema.components.forEach((component) => {
                const oComponent = document.createElement("div");
                oComponent.style.left = component.left + "px";
                oComponent.style.top = component.top + "px";
                oComponent.style.width = component.width + "px";
                oComponent.style.height = component.height + "px";
                oComponent.id = component.id;
                oComponent.classList.add("component");
                oComponent.classList.toggle("active", component.active);
                if (component.el == "button") oComponent.innerHTML += new Button(component).render();
                oCanvas.appendChild(oComponent);
                oComponent.onclick = () => {
                    component.active = !component.active;
                    render();
                };
            });
            computedSelector();
        }
        function computedSelector(e) {
            const activeComponents = schema.components.filter((v) => v.active).map((v) => ({ ...v, rect: { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 } }));
            activeComponents.forEach((v) => {
                const oEl = document.getElementById(v.id);
                v.rect = oEl.getBoundingClientRect();
            });
            console.log(activeComponents);
            if (activeComponents.length) {
                selector.left = activeComponents[0].left;
                selector.top = activeComponents[0].top;
            }
            activeComponents.forEach((v) => {
                if (v.left < selector.left) selector.left = v.left;
            });
        }
        function getRotatedDimensions(length, width, rotationAngle) {
            const radians = (rotationAngle * Math.PI) / 180;
            const rotatedWidth = Math.abs(length * Math.cos(radians)) + Math.abs(width * Math.sin(radians));
            const rotatedHeight = Math.abs(length * Math.sin(radians)) + Math.abs(width * Math.cos(radians));
            return { width: rotatedWidth, height: rotatedHeight };
        }
        function getRotatedWidth(width, height, rotationAngle) {
            const radians = (rotationAngle * Math.PI) / 180;
            const rotatedWidth = Math.sqrt(Math.pow(width * Math.cos(radians), 2) + Math.pow(height * Math.sin(radians), 2));
            return rotatedWidth;
        }
    </script>
</html>
